<template>
  <div class="container">
    <div ref="searchRef">
      <el-form :inline="true" :model="params" class="grids gridColumns5">
        <el-form-item label="报名年份">
          <DatePicker v-model="params.year" type="year"></DatePicker>
        </el-form-item>
        <el-form-item label="课程名称">
          <courseQuery multiple="1" v-model="params.courseName" val="name"></courseQuery>
          <!-- <el-select collapse-tags collapse-tags-tooltip :max-collapse-tags="1" multiple v-model="params.courseName" placeholder="请选择课程" clearable filterable>
          <el-option v-for="(item,index) in courseNameDicts" :key="index" :label="item" :value="item" />
        </el-select> -->
        </el-form-item>
        <el-form-item label="学员姓名">
          <el-input v-model="params.studentName" placeholder="请输入学员姓名" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="params.mobile" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="params.identityCard" placeholder="请输入身份证号" clearable />
        </el-form-item>
        <el-form-item label="有效学时≥">
          <el-input clearable type="number" @change="onSubmit" v-model="params.learningTime" placeholder="请输入有效学时">
            <template #append>小时</template>
          </el-input>
        </el-form-item>
        <el-form-item label="累计学时≥">
          <el-input clearable @change="onSubmit" v-model="params.totalLearningTime" placeholder="请输入有效学时">
            <template #append>小时</template>
          </el-input>
        </el-form-item>
        <el-form-item label="考试分数">
          <el-input @change="search" clearable type="number" v-model="params.examScores" placeholder="请输入考试分数">
            <template #append>分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="考试合格">
          <el-input @change="search" clearable type="number" v-model="params.passExam" placeholder="请输入考试合格" />
        </el-form-item>
      </el-form>

      <div class="actionBtn">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="exportExcel" type="primary" plain>导出</el-button>
        <el-button @click="init">重置</el-button>
      </div>
    </div>

    <el-table :data="tableData.rows" :max-height="tableHeight">
      <el-table-column prop="registrationTime" label="报名时间" width="120">
        <template #default="scope">
          {{proxy.$utils.dateTimeFormateFn(scope.row.registrationTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="courseName" label="课程名称" width="450" />
      <el-table-column prop="studentName" label="学员姓名" />
      <el-table-column prop="mobile" label="手机号" width="120" />
      <el-table-column prop="identityCard" label="身份证号" width="180" />
      <el-table-column prop="tagList" label="课程标签" width="230">
        <template #default="scope">
          <el-popover placement="right" :width="200" trigger="click" v-if="scope.row.tagList&&scope.row.tagList.length>1">
            <template #reference>
              <div class="button">{{scope.row.tagList.length}}</div>
            </template>
            <el-table :data="scope.row.tagList">
              <el-table-column prop="tagname" label="标签名称" />
            </el-table>
          </el-popover>
          <div class="button" v-else-if="scope.row.tagList && scope.row.tagList.length==1">{{scope.row.tagList[0].tagname}}</div>
          <el-text v-else>-</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="learningTime" label="有效学时" width="130" />
      <el-table-column prop="totalLearningTime" label="累计学时" width="160" />
      <el-table-column prop="exam_scores" label="考试分数">
        <template #default="scope">
          {{score_format(scope.row.exam_scores)}}
        </template>
      </el-table-column>
      <el-table-column prop="passExam" label="考试合格" />
      <el-table-column prop="lastActiveTime" label="最后活跃时间" width="150" />
      <el-table-column prop="role" label="学员类型" />
      <el-table-column prop="addTime" label="创建时间" width="120">
        <template #default="scope">
          {{proxy.$utils.dateTimeFormateFn(scope.row.addTime*1000)}}
        </template>
      </el-table-column>
      <el-table-column prop="disabled" label="账号状态" />
      <el-table-column prop="out_trade_no" label="订单号" width="150" />
      <el-table-column prop="out_trade_no" label="删除时间" width="120" fixed="right">
        <template #default="scope">
          {{proxy.$utils.dateTimeFormateFn(scope.row._add_time)}}
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="params.pageIndex" v-model:limit="params.pageSize" @pagination="getInfo" />
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let params = ref({
  year: proxy.$utils.dateTimeFormateFn(Date.now(), "year"),
  identityCard: "",
  mobile: "",
  studentName: "",
  courseName: "",
  examScores: "",
  learningTime: "",
  totalLearningTime: "",
  passExam: "",
  pageIndex: 1,
  pageSize: 50,
});
let tableData = ref({});
let courseNameDicts = ref([]); //课程名称字典
let searchHeight = ref(0);

let tableHeight = computed(() => {
  let hei =
    window.innerHeight - 84 - counter.pageHeight - 55 - searchHeight.value;
  return `${hei}px`;
});

onMounted(() => {
  getInfo();
  getDicts();
  searchHeight.value = proxy.$refs.searchRef.offsetHeight;
});

async function exportExcel() {
  let resp = await await proxy.$apis.moxueyuanInfo({
    type: "historicalRecordsQuery",
    data: params.value,
  });
  let data = [];
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index];
    data.push({
      报名时间: proxy.$utils.dateTimeFormateFn(element.registrationTime),
      课程名称: element.courseName,
      姓名: element.studentName,
      手机号: element.mobile,
      身份证号: element.identityCard,
      课程标签: element.tagList && element.tagList.length,
      有效学时: element.learningTime,
      累计学时: element.totalLearningTime,
      考试分数: score_format(element.exam_scores),
      考试合格: element.passExam,
      最后活跃时间: proxy.$utils.dateTimeFormateFn(element.lastActiveTime),
      学员类型: element.role,
      创建时间: proxy.$utils.dateTimeFormateFn(element.addTime * 1000),
      账号状态: element.disabled,
      订单号: element.out_trade_no,
      删除时间: proxy.$utils.dateTimeFormateFn(element._add_time),
    });
  }
  let cols = []; //设置表头样式
  resp.forEach((element) => {
    cols.push({ wch: 20 });
  });
  let query = { jsonData: data, cols };
  await proxy.$utils.exportToExcel(query, "历史课时记录");
}

function search() {
  params.value.pageIndex = 1;
  getInfo();
}

async function getDicts() {
  courseNameDicts.value = await proxy.$apis.moxueyuanInfo({
    type: "historyDict",
    data: { key: "courseName" },
  });
  console.log("字典", courseNameDicts.value);
}

function init() {
  params.value = {
    year: "",
    identityCard: "",
    mobile: "",
    studentName: "",
    courseName: "",
    examScores: "",
    learningTime: "",
    totalLearningTime: "",
    passExam: "",
    pageIndex: 1,
    pageSize: 50,
  };
  getInfo();
}

function score_format(e) {
  if (e && e.length) {
    let amount = 0;
    let arr = [];
    e.forEach((element) => {
      if (element.stateValue == 2) {
        arr.push(element);
        amount += Number(element.score);
      }
    });
    return amount ? (amount / arr.length).toFixed(2) : 0;
  }
  return 0;
}

function onSubmit() {
  params.value.pageIndex = 1;
  getInfo();
}

async function getInfo() {
  tableData.value = await proxy.$apis.moxueyuanInfo({
    type: "historicalRecords",
    data: params.value,
  });
  console.log("肆无忌惮", tableData.value);
}

watch(
  () => [
    params.value.year,
    params.value.identityCard,
    params.value.mobile,
    params.value.studentName,
    params.value.courseName,
    params.value.examScores,
    params.value.learningTime,
    params.value.totalLearningTime,
    params.value.passExam,
  ],
  (newValue, oldValue) => {
    if (newValue) onSubmit();
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.container {
  margin: 20px;
  .actionBtn {
    margin-bottom: 15px;
  }
}
</style>








